<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org"/>
    <title>JavaScript: TDD and BDD</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="Copyright &#169; 2005-2010 W3C (MIT, ERCIM, Keio)"/>
    <meta name="duration" content="5"/>
    <meta name="font-size-adjustment" content="-2"/>

    <link rel="stylesheet" href="styles/slidy.css" type="text/css"/>
    <link rel="stylesheet" href="styles/w3c-blue.css" type="text/css"/>
    <script type="text/javascript" src="scripts/slidy.js" charset="utf-8">//</script>

    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/presentation.css"/>
    <script type="text/javascript" src="scripts/presentation.js"></script>
</head>


<body style="">
<div class="background">
    <img alt="" id="head-icon" src="graphics/icon-blue.png"/>
</div>

<div class="background slanty">
</div>

<div class="slide cover title">
    <img class="hidden" src="graphics/bullet.png" alt=""/>
    <img class="hidden" src="graphics/fold.gif" alt=""/>
    <img class="hidden" src="graphics/unfold.gif" alt=""/>
    <img class="hidden" src="graphics/fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/unfold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt=""/>

    <h1>JavaScript: TDD and BDD</h1>

    <div style="position: absolute; bottom: 20px;">
        <p>Alex.Kolonitsky@gmail.com</p>

        <p>
            <a href="http://javascript-learning-courses.googlecode.com">http://javascript-learning-courses.googlecode.com</a>
        </p>
    </div>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="current">XUnit vs XSpec</li>
        <li>Browser vs Emulation</li>
        <li>Tools and Process</li>
    </ul>
</div>

<div class="slide">
    <h1>XUnit</h1>

    <ul>
        <li>JSUnit</li>
        <li>QUnit</li>
        <li>JsTestDriver</li>
        <li>RhinoUnit</li>
        <li>YUITest</li>
        <li>...</li>
    </ul>
</div>

<div class="slide">
    <h1>QUnit</h1>

    <p>you have to include its qunit.js and qunit.css</p>

    <pre class="brush: js">
        test("a basic test example", function() {
          ok( true, "this test is fine" );
          var value = "hello";
          equal( value, "hello", "We expect value to be hello" );
        });

        module("Module A");

        test("first test within module", function() {
          ok( true, "all pass" );
        });
    </pre>
</div>

<div class="slide">
    <h1>QUnit</h1>

    <img src="graphics/TDD/QUnit-Report.png" alt="">
</div>

<div class="slide">
    <h1>JsTestDriver</h1>

    <pre class="brush: js">
        TestCase("MyHTMLTest", {
            "test should add class name to element": function () {
                /*:DOC += <div id="myDiv"><!-- More content here if you please --></div> */
                var div = document.getElementById("myDiv");
                var className = "jstestdriver";
                myNamespace(div).addClassName(className);

                assertEquals(className, div.className);
            }
        });
    </pre>
</div>

<div class="slide">
    <h1>JsTestDriver</h1>

    <img src="graphics/TDD/JSTestDriver-Overview.png" alt="">
</div>

<div class="slide">
    <h1>XSpec</h1>

    <ul>
        <li>Jasmine</li>
        <li>ScrewUnit</li>
        <li>jsspec</li>
        <li>jspec</li>
        <li>...</li>
    </ul>
</div>

<div class="slide">
    <h1>Jasmine</h1>

    <p>It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.</p>
    <pre class="brush: js">
        describe('Calculator', function () {
            it('can add a number', function () {
                ...
            });

            it('can multiply some numbers', function () {
                ...
            });
        });
    </pre>
</div>

<div class="slide">
    <h1>ScrewUnit</h1>

    <pre class="brush: js">
        describe("a nested describe", function() {
          var invocations = [];

          before(function() {
            invocations.push("before");
          });

          describe("a doubly nested describe", function() {
            before(function() {
              invocations.push('inner before');
            });

            it("runs befores in all ancestors prior to an it", function() {
              expect(invocations).to(equal, ["before", "inner before"]);
            });
          });
        });
    </pre>
</div>

<div class="slide">
    <h1>ScrewUnit</h1>

    <img src="graphics/TDD/screw-unit.png" alt="">
</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">XUnit vs XSpec</li>
        <li class="current">Browser vs Emulation</li>
        <li>Tools and Process</li>
    </ul>
</div>

<div class="slide">
    <h1>Run in the browser</h1>

    <ul>
        <li>QUnit (jQuery)</li>
        <li>YUI Test (Yahoo)</li>
        <li>JsUnitTest</li>
    </ul>
</div>

<div class="slide">
    <h1>Run in simulated environment</h1>

    <ul>
        <li>Rhino</li>
        <li>env.js</li>
    </ul>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">XUnit vs XSpec</li>
        <li class="done">Browser vs Emulation</li>
        <li class="current">Tools and Process</li>
    </ul>
</div>

<div class="slide">
    <h1>IDE?</h1>
</div>

<div class="slide">
    <h1>Покрытие</h1>

    <ul>
        <li>JsTestDriverCoverage</li>
        <li>...</li>
    </ul>
</div>

<div class="slide">
    <h1>Вопросы / Предложения</h1>

    <ul>
        <li>Alex.Kolonitsky@gmail.com</li>
        <li>akolonitsky@exadel.com</li>
        <li>Skype: Desargues_</li>
        <li>http://code.google.com/p/javascript-learning-courses/issues/list</li>
    </ul>
</div>

</body>
</html>

